<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/gsap-public/minified/jquery-3.6.0.min.js"></script>
<!--    <script src="./js/gsap-public/gsap.min.js"></script>-->

</head>
<body>


<style>
    /*.heart {*/
    /*    width: 100px;*/
    /*    height: 100px;*/
    /*    background: url("https://cssanimation.rocks/images/posts/steps/heart.png") no-repeat;*/
    /*    background-position: 0 0;*/
    /*    cursor: pointer;*/
    /*    -webkit-transition: background-position 1s steps(28);*/
    /*    transition: background-position 1s steps(28);*/
    /*    -webkit-transition-duration: 0s;*/
    /*    transition-duration: 0s;*/
    /*}*/
    /*.heart.is-active {*/
    /*    -webkit-transition-duration: 1s;*/
    /*    transition-duration: 1s;*/
    /*    background-position: -2800px 0;*/
    /*}*/
    /*body {*/
    /*    background: -webkit-linear-gradient(315deg, #121721 0%, #000000 100%) fixed;*/
    /*    background: linear-gradient(135deg, #121721 0%, #000000 100%) fixed;*/
    /*    color: #FFF;*/
    /*    font: 300 16px/1.5 "Open Sans", sans-serif;*/
    /*}*/
    /*.stage {*/
    /*    position: fixed;*/
    /*    top: 50%;*/
    /*    left: 50%;*/
    /*    -webkit-transform: translate(-50%, -50%);*/
    /*    transform: translate(-50%, -50%);*/
    /*}*/
    .button {
        --color: #F6F8FF;
        --color-hover: #F6F8FF;
        --color-active: #fff;
        --icon: #E1E6F9;
        --icon-hover: #ECEFFC;
        --icon-active: #fff;
        --background: #404660;
        --background-hover: #393E57;
        --background-active: #275EFE;
        --shadow: rgba(0, 17, 119, 0.1);
        display: block;
        outline: none;
        cursor: pointer;
        position: relative;
        border: 0;
        background: none;
        padding: 4px 6px 4px 11px;
        border-radius: 9px 0px 0px 9px;
        line-height: 27px;
        font-family: inherit;
        font-weight: 600;
        font-size: 14px;
        color: var(--color);
        -webkit-appearance: none;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.2s linear;
        -webkit-clip-path: inset(0px 4px 0px 0px);
    }
    .button:hover {
        --icon: var(--icon-hover);
        --color: var(--color-hover);
        --background: var(--background-hover);
    }
    .button:active {
        --scale: .95;
    }
    .button:not(.liked):hover {
        --hand-rotate: 8deg;
        --hand-thumb-1: -12deg;
        --hand-thumb-2: 36deg;
    }
    .button.liked {
        --span-x: 2px;
        --span-d-o: 1;
        --span-d-x: 0;
        --icon: var(--icon-active);
        --color: var(--color-active);
        --background: var(--background-active);
        --hand-name: hand;
    }
    .button:after {
        content: "";
        min-width: 10px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        border-radius: inherit;
        transition: background 0.2s linear, transform 0.2s, box-shadow 0.2s linear;
        transform: scale(var(--scale, 1)) translateZ(0);
        background: var(--background);
        box-shadow: 0 4px 8px var(--shadow), 0 8px 20px var(--shadow);
    }
    .button .emitter {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateZ(-4px);
    }
    .button .emitter div {
        width: 6px;
        height: 6px;
        margin: -3px 0 0 -3px;
        border-radius: 2px;
        position: absolute;
        left: 0;
        top: 0;
        transform-style: preserve-3d;
        background: var(--b, none);
    }
    .button .hand {
        width: 11px;
        height: 11px;
        border-radius: 2px 0 0 0;
        background: var(--icon);
        margin: 10px 8px 0 0;
        transform-origin: -5px -1px;
        transition: transform 0.25s, background 0.2s linear;
        transform: rotate(var(--hand-rotate, 0deg)) translateZ(0);
        -webkit-animation: var(--hand-name, none) 0.5s linear;
        animation: var(--hand-name, none) 0.5s linear;
    }
    .button .hand:before, .button .hand:after {
        content: "";
        background: var(--icon);
        position: absolute;
        transition: background 0.2s linear, box-shadow 0.2s linear;
    }
    .button .hand:before {
        left: -5px;
        bottom: 0;
        height: 12px;
        width: 4px;
        border-radius: 1px 1px 0 1px;
    }
    .button .hand:after {
        right: -3px;
        top: 0;
        width: 4px;
        height: 4px;
        border-radius: 0 2px 2px 0;
        background: var(--icon);
        box-shadow: -0.5px 4px 0 var(--icon), -1px 8px 0 var(--icon), -1.5px 12px 0 var(--icon);
        transform: scaleY(0.6825);
        transform-origin: 0 0;
    }
    .button .hand .thumb {
        background: var(--icon);
        width: 10px;
        height: 4px;
        border-radius: 2px;
        transform-origin: 2px 2px;
        position: absolute;
        left: 0;
        top: 0;
        transition: transform 0.25s, background 0.2s linear;
        transform: scale(0.85) translateY(-0.5px) rotate(var(--hand-thumb-1, -45deg)) translateZ(0);
    }
    .button .hand .thumb:before {
        content: "";
        height: 4px;
        width: 7px;
        border-radius: 2px;
        transform-origin: 2px 2px;
        background: var(--icon);
        position: absolute;
        left: 7px;
        top: 0;
        transition: transform 0.25s, background 0.2s linear;
        transform: rotate(var(--hand-thumb-2, -45deg)) translateZ(0);
    }
    .button .hand,
    .button span {
        z-index: 1;
        position: relative;
        display: inline-block;
        vertical-align: top;
    }
    .button .hand span,
    .button span span {
        opacity: var(--span-d-o, 0);
        transition: transform 0.25s, opacity 0.2s linear;
        transform: translateX(var(--span-d-x, 4px)) translateZ(0);
    }
    .button > span {
        transition: transform 0.25s;
        transform: translateX(var(--span-x, 4px)) translateZ(0);
    }

    @-webkit-keyframes hand {
        30% {
            transform: rotate(-14deg) translateZ(0);
        }
        65% {
            transform: rotate(7deg) translateZ(0);
        }
        100% {
            transform: rotate(0deg) translateZ(0);
        }
    }

    @keyframes hand {
        30% {
            transform: rotate(-14deg) translateZ(0);
        }
        65% {
            transform: rotate(7deg) translateZ(0);
        }
        100% {
            transform: rotate(0deg) translateZ(0);
        }
    }
    html {
        box-sizing: border-box;
        -webkit-font-smoothing: antialiased;
    }

    * {
        box-sizing: inherit;
    }
    *:before, *:after {
        box-sizing: inherit;
    }

    body {
        min-height: 100vh;
        display: flex;
        font-family: "Inter", Arial;
        justify-content: center;
        align-items: center;
        background: #F6F8FF;
    }
    body .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
    }
    body .dribbble img {
        display: block;
        height: 28px;
    }
    body .twitter {
        position: fixed;
        display: block;
        right: 64px;
        bottom: 14px;
    }
    body .twitter svg {
        width: 32px;
        height: 32px;
        fill: #1da1f2;
    }
</style>



<button class="button">
    <div class="emitter"></div>
    <div class="hand">
        <div class="thumb"></div>
    </div>
</button>

<button class="button" style="transform: rotate(180deg);margin-left: -8px">
    <div class="emitter"></div>
    <div class="hand">
        <div class="thumb"></div>
    </div>
</button>


<script>
    // gsap.registerPlugin(Physics2DPlugin);

    document.querySelectorAll(".button").forEach((button) => {
        button.addEventListener("click", (e) => {
            console.log("click")
            button.classList.toggle("liked");
            button.classList.toggle("liked");
            button.classList.toggle("liked");
            if (button.classList.contains("liked")) {
                setTimeout(() => {
                    // particles(
                    //     button.querySelector(".emitter"),
                    //     100,
                    //     0,
                    //     0,
                    //     360,
                    //     button.offsetWidth
                    // );
                }, 160);
            }
        });
    });

    //
    // $(function() {
    //     $(".heart").on("click", function() {
    //         $(this).toggleClass("is-active");
    //     });
    // });
    var logindata = new FormData()


    logindata.append('username', 'admin');
    logindata.append('token', 'MTYyNjYzMTY1Ny4yNTE3Njk6NTQxNjZhZmQ1MzdiODc3YTU3NDRmZDFlYTM3ZjUyNWE4OTUzNmY0NQ==');

    axios({
        method: 'POST',
        url: 'http://localhost:8000/authorities/welcome/',
        // url: 'http://te5f3ooc.dongtaiyuming.net/polls/login/',
        // data: logindata
        dataType: 'json',
        data: logindata,
    }).then(res => {

        console.log(res)
    }).catch(err => {
        console.log(err)
    })
</script>
</body>
</html>